<template>
<!--    <vuescroll>-->
<!--        -->
<!--    </vuescroll>-->
<!--    <vuescroll :ops="ops">-->
<!--        -->
<!--    </vuescroll>-->

    <div id="message" v-scroll-bottom="sessions">
        <div>
                <ul v-if="currentSession">
                    <li v-for="entry in sessions[user.username+'#'+currentSession.username]">
                        <p class="time">
                            <span>{{entry.date | time}}</span>
                        </p>
                        <div class="main" :class="{self:entry.self}">
                            <img class="avatar" :src="entry.self ? user.userface : currentSession.userface" alt="">
                            <p class="text">{{entry.content}}</p>
                        </div>
                    </li>
                </ul>
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import vuescroll from 'vuescroll/dist/vuescroll-native';

    export default {
        name: 'message',
        data() {
            return {
                user: JSON.parse(window.sessionStorage.getItem("user")),
                ops: {
                    vuescroll: {
                        mode: 'native',
                        sizeStrategy: 'percent',
                        detectResize: true,
                        /** 锁定一种滚动方向， 锁定的方向为水平或者垂直方向上滑动距离较大的那个方向 */
                        locking: true,
                    },
                    scrollPanel: {
                        initialScrollY: false,
                        initialScrollX: false,
                        scrollingX: true,
                        scrollingY: true,
                        speed: 300,
                        easing: undefined,
                        verticalNativeBarPos: 'right'
                    },
                    rail: {
                        background: '#01a99a',
                        opacity: 0,
                        size: '6px',
                        specifyBorderRadius: false,
                        gutterOfEnds: null,
                        gutterOfSide: '2px',
                        keepShow: false
                    },
                    bar: {
                        showDelay: 500,
                        onlyShowBarOnScroll: true,
                        keepShow: false,
                        background: '#c1c1c1',
                        opacity: 1,
                        hoverStyle: false,
                        specifyBorderRadius: false,
                        minSize: 0,
                        size: '6px',
                        disable: false
                    }
                }
            }
        },
        components: {
            vuescroll
        },
        computed: mapState([
            'sessions',
            'currentSession'
        ]),
        filters: {
            time(date) {
                if (date) {
                    date = new Date(date);
                }
                return `${date.getHours()}:${date.getMinutes()}`;
            }
        },
        directives: {/*这个是vue的自定义指令,官方文档有详细说明*/
            // 发送消息后滚动到底部,这里无法使用原作者的方法，也未找到合理的方法解决，暂用setTimeout的方法模拟
            'scroll-bottom'(el) {
                //console.log(el.scrollTop);
                setTimeout(function () {
                    el.scrollTop += 9999;
                }, 1)
            }
        }
    }
</script>

<style lang="scss" scoped>
    #message {
        padding: 15px;
        height: 70%;
        /*max-height: 68%;*/
        overflow-y: scroll;

        ul {
            list-style-type: none;
            padding-left: 0px;

            li {
                margin-bottom: 15px;
            }
        }

        .time {
            text-align: center;
            margin: 7px 0;

            > span {
                display: inline-block;
                padding: 0 18px;
                font-size: 12px;
                color: #FFF;
                background-color: #2E3238;
                border-radius: 2px;
            }
        }

        .main {
            .avatar {
                float: left;
                margin: 0 10px 0 0;
                border-radius: 3px;
                width: 30px;
                height: 30px;

            }

            .text {
                display: inline-block;
                padding: 0 10px;
                max-width: 80%;
                background-color: #fafafa;
                border-radius: 4px;
                line-height: 30px;
            }
        }

        .self {
            text-align: right;

            .avatar {
                float: right;
                margin: 0 0 0 10px;
                border-radius: 3px;
                width: 30px;
                height: 30px;
            }

            .text {
                display: inline-block;
                padding: 0 10px;
                max-width: 80%;
                background-color: #b2e281;
                border-radius: 4px;
                line-height: 30px;
            }
        }
    }
</style>
